<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" >

	<title>Document</title>
	<style>
		
		@media screen and (min-width: 300px) and (max-width: 500px){
			.div1{
				background:gray;
			    color:gold;
			}
		}
		@media screen and (min-width: 501px) and (max-width: 900px){
			.div1{
				background:tomato;
			    color:pink;
			}
		}
		@media screen and (min-width: 901px) {
			.div1{
				background:yellow;
			    color:skyblue;
			}
		} 
		/*媒体查询查询的是设备不是分辨率  screen(手机/电脑/pad) TV 打印机print(微波炉,打印机)*/
	</style>
</head>
<body>
	<div class="div1">1111111111111222222222222222222ffff的点点滴滴多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多的点点滴滴多多多多多多多多多多多多多多多多多多多多多多多多1的点点滴滴多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多的点点滴滴多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多发发发发发发付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付发发发发发发付付付付付付付付付付付付付付付付付付付付付付付付付付</div>
</body>
</html>